<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header sticky">
        <div class="flex flex-column">
            <div class="gh-canvas-breadcrumb">
                <LinkTo @route="settings">
                    Settings
                </LinkTo>
                {{svg-jar "arrow-right-small"}}
                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
                    Integrations
                </LinkTo>
                {{svg-jar "arrow-right-small"}} Zapier
            </div>
        </div>
    </GhCanvasHeader>

    <section class="view-container">

        <section class="gh-main-section no-heading">
            <div class="gh-main-section-block overflow-hidden">
                <div class="gh-main-section-content app-detail-heading app-grid">
                    <div class="app-cell">
                        <img class="app-icon" src="assets/img/zapier.svg" alt="" role="presentation" />
                    </div>
                    <div class="app-cell overflow-hidden">
                        <h3>Zapier</h3>
                        <p>Automation for your favorite apps</p>

                        <div class="gh-zapier-data-container">
                            <div class="gh-zapier-data">
                                <div class="data-label">Admin API key</div>
                                <div class="data highlight-hover">
                                    <div class="relative flex items-center {{unless this.copyAdminKeyTask.isRunning "hide-child-instant"}}">
                                        <span class="admin-key" data-test-text="admin-key">
                                            {{this.integration.adminKey.secret}}
                                        </span>
                                        <div class="app-api-buttons child">
                                            <button type="button" {{on "click" (fn this.confirmRegenerateKey this.integration.adminKey)}} class="app-button-regenerate">
                                                {{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
                                            </button>
                                            <button type="button" {{on "click" (perform this.copyAdminKeyTask)}} class="app-button-copy">
                                                {{#if this.copyAdminKeyTask.isRunning}}
                                                    {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
                                                {{else}}
                                                    Copy
                                                {{/if}}
                                            </button>
                                        </div>
                                    </div>
                                    {{#if (eq this.regeneratedApiKey.type this.integration.adminKey.type)}}
                                        <div class="green"> Admin API Key was successfully regenerated </div>
                                    {{/if}}
                                </div>
                            </div>
                            <div class="gh-zapier-data">
                                <div class="data-label">API URL</div>
                                <div class="data highlight-hover">
                                    <div class="relative flex items-center {{unless this.copyApiUrlTask.isRunning "hide-child-instant"}}">
                                        <span class="api-url" data-test-text="api-url">
                                            {{this.apiUrl}}
                                        </span>
                                        <div class="app-api-buttons child">
                                            <button type="button" {{on "click" (perform this.copyApiUrlTask)}} class="app-button-copy">
                                                {{#if this.copyApiUrlTask.isRunning}}
                                                    {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
                                                {{else}}
                                                    Copy
                                                {{/if}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="zapier-toggle" class="gh-main-section">
            <h4 class="gh-main-section-header large bn">Zapier templates</h4>
            <p class="gh-main-section-description">Explore pre-built templates for common automation tasks</p>
            <div class="gh-setting-content gh-setting-content--no-action">
                <div class="gh-setting-content-extended">
                    <div class="apps-grid gh-settings-zapier-templates">
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb" style="background-image:url(assets/img/logos/orb-black-1.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/twitter.svg);background-size:32px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Share new posts to Twitter</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=50909" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb" style="background-image:url(assets/img/logos/orb-black-2.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png);background-size:30px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Share scheduled posts with your team in Slack</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=359499" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb" style="background-image:url(assets/img/logos/orb-black-3.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/patreon.svg);background-size:28px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Connect Patreon to your Ghost membership site</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=75801" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb" style="background-image:url(assets/img/logos/orb-black-4.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/zero-bounce.png);background-size:30px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Protect email delivery with email verification</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=359415" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb" style="background-image:url(assets/img/logos/orb-black-5.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/paypal.svg);background-size:26px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Add members for successful sales in PayPal</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=184423" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb rot-1" style="background-image:url(assets/img/logos/orb-black-3.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/paypal.svg);background-size:26px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Unsubscribe members who cancel a subscription in PayPal</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=359348" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb rot-2" style="background-image:url(assets/img/logos/orb-black-1.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/google-docs.svg);background-size:22px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Send new post drafts from Google Docs to Ghost</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=50924" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb rot-3" style="background-image:url(assets/img/logos/orb-black-4.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon id-typeform" style="background-image:url(assets/img/typeform.svg);background-size:32px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Survey new members using Typeform</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=359407" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                        <div class="apps-grid-cell">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <div class="flex items-center">
                                        <figure class="apps-card-app-orb rot-3" style="background-image:url(assets/img/logos/orb-black-1.png);background-size:32px;"></figure>
                                        {{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
                                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/mailchimp.svg);background-size:32px;"></figure>
                                    </div>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title">Sync email subscribers in Ghost + Mailchimp</h3>
                                    </div>
                                </div>
                                <div class="gh-card-right">
                                    <a href="https://zapier.com/webintent/create-zap?template=359342" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
                                </div>
                            </article>
                        </div>
                    </div>

                    <div class="zapier-footer">
                        <a href="https://zapier.com/apps/ghost/integrations?utm_medium=partner_api&utm_source=widget&utm_campaign=Widget" target="_blank" rel="noopener noreferrer"><span>See more Ghost integrations powered by</span> <figure style="background-image:url(assets/img/zapier-logo.svg); background-size: 42px;"></figure></a>
                    </div>

                </div>
            </div>
        </section>
    </section>
</section>
